// 导航功能工具类 - 多个页面共享的导航功能

/**
 * 标签导航管理器
 * 负责处理标签栏的左右滚动、按钮状态更新等功能
 */
class TabNavigationManager {
  constructor(tabsContainerId, leftNavBtnId, rightNavBtnId) {
    this.tabsContainer = document.getElementById(tabsContainerId);
    this.leftNavBtn = document.getElementById(leftNavBtnId);
    this.rightNavBtn = document.getElementById(rightNavBtnId);
    
    // 初始化
    this.init();
  }
  
  // 初始化导航功能
  init() {
    if (!this.tabsContainer || !this.leftNavBtn || !this.rightNavBtn) {
      console.warn('标签导航容器或按钮不存在，导航功能未初始化');
      return;
    }
    
    // 设置左右按钮的绝对定位
    this.setButtonPosition();
    
    // 初始化导航按钮状态
    this.updateNavButtons();
    
    // 添加事件监听器
    this.addEventListeners();
  }
  
  // 设置按钮定位
  setButtonPosition() {
    // 设置左右按钮的绝对定位
    this.leftNavBtn.style.position = 'absolute';
    this.rightNavBtn.style.position = 'absolute';
    this.leftNavBtn.style.top = '50%';
    this.rightNavBtn.style.top = '50%';
    this.leftNavBtn.style.transform = 'translateY(-50%)';
    this.rightNavBtn.style.transform = 'translateY(-50%)';
  }
  
  // 添加事件监听器
  addEventListeners() {
    // 左右导航按钮事件
    this.leftNavBtn.addEventListener('click', () => {
      this.scrollLeft();
    });
    
    this.rightNavBtn.addEventListener('click', () => {
      this.scrollRight();
    });
    
    // 监听滚动事件，更新导航按钮状态
    this.tabsContainer.addEventListener('scroll', () => {
      this.updateNavButtons();
    });
    
    // 窗口大小改变时也需要更新按钮状态
    window.addEventListener('resize', () => {
      this.updateNavButtons();
    });
  }
  
  // 向左滚动固定步长
  scrollLeft() {
    const scrollAmount = this.tabsContainer.clientWidth * 0.75; // 滚动容器宽度的75%
    this.tabsContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
  }
  
  // 向右滚动固定步长
  scrollRight() {
    const scrollAmount = this.tabsContainer.clientWidth * 0.75; // 滚动容器宽度的75%
    this.tabsContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  }
  
  // 更新导航按钮状态
  updateNavButtons() {
    if (!this.tabsContainer || !this.leftNavBtn || !this.rightNavBtn) return;
    
    // 检查是否可以滚动
    const canScrollLeft = this.tabsContainer.scrollLeft > 10;
    const canScrollRight = this.tabsContainer.scrollLeft + this.tabsContainer.clientWidth < this.tabsContainer.scrollWidth - 10;
    
    // 更新按钮可见性
    this.leftNavBtn.classList.toggle('visible', canScrollLeft);
    this.rightNavBtn.classList.toggle('visible', canScrollRight);
    
    // 更新按钮禁用状态
    this.leftNavBtn.disabled = !canScrollLeft;
    this.rightNavBtn.disabled = !canScrollRight;
  }
  
  // 重新计算导航状态
  recalculate() {
    this.updateNavButtons();
  }
}

/**
 * 页面导航工具
 * 提供页面跳转、滚动到元素等功能
 */
class PageNavigation {
  /**
   * 跳转到首页
   */
  static goToHome() {
    window.location.href = 'index.html';
  }
  
  /**
   * 跳转到案例页面
   */
  static goToDemos() {
    window.location.href = 'demos.html';
  }
  
  /**
   * 带参数跳转到首页
   * @param {Object} params - 查询参数
   */
  static goToHomeWithParams(params) {
    const queryString = new URLSearchParams(params).toString();
    window.location.href = `index.html?${queryString}`;
  }
  
  /**
   * 平滑滚动到元素
   * @param {string|HTMLElement} target - 目标元素或选择器
   * @param {Object} options - 滚动选项
   */
  static scrollToElement(target, options = {}) {
    const defaultOptions = {
      behavior: 'smooth',
      block: 'start'
    };
    
    const mergedOptions = { ...defaultOptions, ...options };
    
    let element;
    if (typeof target === 'string') {
      element = document.querySelector(target);
    } else {
      element = target;
    }
    
    if (element) {
      element.scrollIntoView(mergedOptions);
    }
  }
  
  /**
   * 设置页面内锚点的平滑滚动
   */
  static setupAnchorSmoothScroll() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        PageNavigation.scrollToElement(targetId);
      });
    });
  }
}

// 导出类
export { TabNavigationManager, PageNavigation };